<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-16 20:50:58
 * @LastEditTime: 2019-11-29 11:51:17
 * @LastEditors: ljhmp
 -->
<template>
  <view class="loading-box">
    
    <!-- 第一页样式 -->
    <template v-if="page === 1">
      
      <!-- 加载中 -->
      <view v-if="status == 'loading'" class="top-loading">
        <image class="top-loading-img" :src="useImages.loading"></image>
        <text class="top-text">{{ useTexts.loading }}</text>
      </view>
      
      <!-- 无数据 -->
      <view v-else-if="status == 'null'" class="top-null" @click="nulls">
        <image class="top-null-img" :src="useImages.nulls"></image>
        <text class="top-text">{{ useTexts.nulls }}</text>
      </view> 
      
      <!-- 加载错误 -->
      <view v-else-if="status == 'error'" class="top-error" @click="error">
        <image class="top-error-img" :src="useImages.error"></image>
        <text class="top-text">{{ useTexts.error }}</text>
      </view>
      
    </template>
    
    
		
    <!-- 非第一页样式 -->
    <template v-else>
      
      <!-- 加载中 -->
      <view v-if="status == 'wait'" class="btm-wait">
      	<text class="btm-text">{{ useTexts.wait }}</text>
      </view>
      
      <!-- 加载中 -->
      <view v-if="status == 'loading'" class="btm-loading">
        <image class="btn-loading-img" :src="useImages.bLoading"></image>
      	<text class="btm-text">{{ useTexts.loading }}</text>
      </view>
      
      <!-- 无更多数据 -->
      <view v-if="status == 'noMore'" class="btm-noMore" @click="noMore">
        <text class="btm-text">{{ useTexts.noMore }}</text>
      </view>
      
      <!-- 加载错误 -->
      <view v-if="status == 'error' && page != 1" class="btm-error" @click="error">
        <text class="btm-text">{{ useTexts.error }}</text>
      </view>
      
    </template>

  </view>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      default: 'loading'
    },
    page: {
      type: Number,
      default: 1
    },
    images: {
      type: Object,
      default() {
        return {};
      }
    },
    texts: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      defImages: {
        loading: '/static/loading/defLoading.gif',
        error: '/static/loading/defError.png',
        nulls: '/static/loading/defNull.png',
        bLoading: '/static/loading/defBottomLoading.gif'  
      },
      defTexts: {
        loading: '数据加载中...',
        error: '点击重新获取~',
        nulls: '- 空空如也 -',
        noMore: '没有更多数据了~',
        wait: '上滑加载~'
      },
    };
  },
  
  computed: {
    useImages() {
      return Object.assign({}, this.defImages, this.images);
    },
    useTexts() {
			return Object.assign({}, this.defTexts, this.texts);
    }
  },
  methods: {
    error() {
      this.$emit('error');
    },
    noMore() {
      this.$emit('noMore');
    },
		nulls() {
			this.$emit('nulls');
		}
  }
};
</script>

<style lang="scss" scoped>
.top-loading, .top-null, .top-error {
  height: 500rpx;
  @include flex-col;
  align-items: center;
  justify-content: center;
	padding-top: 40rpx;
}
.top-loading-img{
	width: 400rpx;
	height: 300rpx;
}
.top-null-img {
	width: 668rpx;
	height: 386rpx;
}
.top-error-img{
	width: 668rpx;
	height: 386rpx;
}
.top-text {
	font-size: 32rpx;
	color: #333;
}

.btm-wait, .btm-loading, .btm-noMore, .btm-error {
  height: 88rpx;
	@include flex-row;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}
.btn-loading-img{
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}
.btm-text{
	font-size: 32rpx;
	color: #999;
}
</style>
